<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-02-25 
 -->


<template>
  <el-row>

    <el-button type="danger" size="mini" @click='flag = !flag'>切换</el-button>

    <transition-group
      enter-from-class="animate__animated animate__swing"
      enter-active-class="animate__animated animate__bounceInLeft"
      enter-to-class="animate__animated animate__wobble"
      leave-from-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__bounceInRight"
        leave-to-class="animate__animated animate__backOutDown"
        :duration="{ enter: 1000, leave: 0 }"
        @before-enter="beforeEnter" @enter="enter"
        @after-enter="afterEnter"
        @enter-cancelled="enterCancelled"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
        @leave-cancelled="leaveCancelled"
        appear-active-class="animate__animated animate__rotateIn"
        appear-from-class="animate__animated animate__lightSpeedOutRight"
        appear-to-class="animate__animated animate__hinge"
        appear
        >
        <template v-cloak v-if="flag">
          <span :key="Math.random()* 200" class="text-xs ml-2 text-pink-400">名称</span>
            <span :key="Math.random()* 200" class="text-sm ml-4 text-red-400">名称</span>
            <span :key="Math.random()* 200" class="text-base ml-6 text-yellow-400">名称</span>
            <span :key="Math.random()* 200" class="text-lg ml-8 text-purple-400">名称</span>
            <span :key="Math.random()* 200" class="text-xl ml-10 text-blue-400">名称</span>
            <span :key="Math.random()* 200" class="text-2xl ml-12 text-indigo-400">名称</span>
          <span :key="Math.random()* 200" class="text-3xl ml-14 text-green-400">名称</span>
        </template>
    </transition-group>
    <el-col>
      <el-button type="warning" size="mini" @click="shuffle">Shuffle</el-button>
      <transition-group style="width: calc(25px * 10 + 9px);" class="flex flex-wrap" name="mmm" tag="ul">
          <li style="width: 25px" class=" border flex justify-center items-center" v-for="item in items" :key="item.id">{{ item.number }}</li>
      </transition-group>

    </el-col>

    <el-col>
      <input step="20" v-model="num.current" type="number" />
      <div>{{ num.tweenedNumber.toFixed(0) }}</div>
    </el-col>
  </el-row>
</template>

<script>
import gsap from "gsap";
export default {
  name: "transtion-effect",
  data() {
    return {
      num: {
        tweenedNumber: 0,
        current:0,
      },
      flag: true,
      items : Array.apply(null, { length: 81 }).map((_, i) => ({id: i, number: (i % 9) +1 })),
    };
  },

  mounted() {},

  methods: {
    shuffle() {
      this.items = this.items.sort(() => Math.random() > 0.5 ? -1 : 1);
    },
    beforeEnter(...args) {
      //对应enter-from
      console.log("beforeEnter：", args);
    },
    enter(...args) {
      //对应enter-active
      console.log("enter", args);
    },
    afterEnter(...args) {
      //对应enter-to
      console.log("afterEnter", args);
    },
    enterCancelled(...args) {
      //显示过度打断
      console.log("enterCancelled", args);
    },
    beforeLeave(...args) {
      //对应leave-from
      console.log("beforeLeave", args);
    },
    leave(...args) {
      //对应enter-active
      console.log("leave", args);
    },
    afterLeave(...args) {
      //对应leave-to
      console.log("afterLeave", args);
    },
    leaveCancelled(...args) {
      //离开过度打断
      console.log("leaveCancelled", args);
    },
  },
  //  End
};
</script>

<style lang='scss' scoped>
//开始过度
.fade-enter-from {
  background: red;
  width: 0px;
  height: 0px;
  transform: rotate(360deg);
}
//开始过度了
.fade-enter-active {
  transition: all 2.5s linear;
}
//过度完成
.fade-enter-to {
  background: yellow;
  width: 200px;
  height: 200px;
}
//离开的过度
.fade-leave-from {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}
//离开中过度
.fade-leave-active {
  transition: all 1s linear;
}
//离开完成
.fade-leave-to {
  width: 0px;
  height: 0px;
}
.mmm-move {
    transition: transform 0.8s ease;
}
</style>
